<template>
	<view>
		<view class="top_box">
	<!-- 		<view class="top_box_title">个人中心</view> -->
			<view class="top_adress" v-if="mood">
				<image :src="mood.avatar" v-if=" mood.avatar"></image>
				<image src="../../static/logo.png" mode="aspectFill" v-else></image>
				<view class="top_right">
					<text class="name">{{mood.nickName}}</text>
					<text class="phone">{{mood.phonenumber}}</text>
				</view>
			</view>
			<view class="top_adress" v-else>
				<image src="@/static/logo.png" mode="aspectFill"></image>
				<view class="denglu" @click="tologin">
					去登陆
				</view>
			</view>
			<view class="dingdan">
				<view class="dingdan_top">
					<text class="my_diangdan">我的订单</text>
					<view class="dingdan_top_right" @click="goOrder('')">
						<text>全部订单</text>
						<u-icon class='icon' name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="dingdan_Box">
					<view class="dingdan_item" @click="goOrder(0)">
						<view class="imgBox">
							<image src="@/static/oderShou.png" mode="aspectFill"></image>
							<u-badge :is-center='true' type="error" count="7"></u-badge>
						</view>
						<text>待支付</text>
					</view>
					<view class="dingdan_item" @click="goOrder(3)">
						<view class="imgBox">
							<image src="@/static/wait.png" mode="aspectFill"></image>
							<u-badge :is-center='true' type="error" count="7"></u-badge>
						</view>
						<text>待发货</text>
					</view>
					<view class="dingdan_item" @click="goOrder(4)">
						<view class="imgBox">
							<image src="@/static/shouhuo.png" mode="aspectFill"></image>
							<u-badge :is-center='true' type="error" count="7"></u-badge>
						</view>
						<text>待收货</text>
					</view>
					<view class="dingdan_item" @click="goOrder(5)">
						<view class="imgBox">
							<image src="@/static/wancs.png" mode="aspectFill"></image>
							<u-badge :is-center='true' type="error" count="7"></u-badge>
						</view>
						<text>已完成</text>
					</view>
				</view>
			</view>
			<view class="fuwu">
				<view class="dingdan_top">
					<text class="my_diangdan">我的服务</text>
					<view class="dingdan_top_right"></view>
				</view>
				<view class="dingdan_Box">
					<view class="dingdan_item" @click="toGo(0)">
						<view class="imgBox">
							<image src="@/static/weizi.png" mode="aspectFill"></image>
						</view>
						<text>收货地址</text>
					</view>
					<view class="dingdan_item" @click="toGo('renyang')">
						<view class="imgBox">
							<image src="@/static/renyang.png" mode="aspectFill"></image>
						</view>
						<text>{{titleKey}}管理</text>
					</view>
				<!-- 	<view class="dingdan_item" @click="toGo('collect')">
						<view class="imgBox">
							<image src="../../static/logo.png"></image>
						</view>
						<text>我的收藏</text>
					</view> -->
					<view class="dingdan_item" @click="toGo('wenti')">
						<view class="imgBox">
							<image src="@/static/wenti.png" mode="aspectFill"></image>
						</view>
						<text>常见问题</text>
					</view>
					<view class="dingdan_item">
						<view class="imgBox">
							<image src="@/static/kefu.png" mode="aspectFill"></image>
						</view>
						<text>联系客服</text>
					</view>
					<view class="dingdan_item" @click="toGo('personalInfo')">
						<view class="imgBox">
							<image src="@/static/seze.png"></image>
						</view>
						<text>设置</text>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mood: null,
				titleKey:uni.getStorageSync('titleKey')
			}
		},
		onShow() {
			if (uni.getStorageSync('token')) {
				this.cread()
			}
		},
		methods: {
			async cread() {
				let res = await this.$api.request('system/user/getInfo', 'get', {})
				this.mood = res.data.user
			},
			tologin() {
				uni.navigateTo({
					url: '/pages/my/login/login'
				})
			},
			toGo(i) {
				if (!uni.getStorageSync('token')) {
					uni.showToast({
						title: '请登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/my/login/login'
						})
					}, 1000)
				}

				if (i == 0) {
					uni.navigateTo({
						url: '/pages/my/serve/address'
					})
				}
				if (i == 'wenti') {
					uni.navigateTo({
						url: '/pages/my/serve/question'
					})
				} else if (i == 'collect') {
					uni.navigateTo({
						url: '/pages/my/serve/collect'
					})
				} else if (i == 'reservation') {
					uni.navigateTo({
						url: '/pages/my/serve/reservation'
					})
				} else if (i == 'personalInfo') {
					uni.navigateTo({
						url: '/pages/my/info/personalInfo'
					})
				}else if (i == 'renyang') {
					uni.navigateTo({
						url: '/pages/my/adopt/myadopt'
					})
				}
			},
			goOrder(e) {
				uni.navigateTo({
					url: '/pages/my/order/order?status='+e
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.denglu {
		margin-left: 15rpx;
		color: #fff;
		font-weight: 600;
	}

	.top_box {
		width: 100%;
		padding-bottom: 22rpx;
		background-color: #FF9329;
		padding-top: 14%;
		height: 563rpx;
		border-radius: 0 0 8% 8%;

		.dingdan {
			margin: 68rpx auto 0;
			width: 690rpx;
			// height: 274rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 32rpx 10rpx 52rpx 30rpx;

			.dingdan_top {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.my_diangdan {
					font-size: 30rpx;
					color: #333333;
					line-height: 40rpx;
					font-weight: 600;
				}

				.dingdan_top_right {
					color: #666;
					font-size: 24rpx;
					line-height: 34rpx;
					display: flex;
					align-items: center;

					text {
						margin-right: 20rpx;
					}

					.icon {
						color: #666;
					}
				}

			}

			.dingdan_Box {
				display: flex;
				// justify-content: space-between;
				flex-wrap: wrap;
				margin: 52rpx 28rpx 0;

				.dingdan_item {
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 24rpx;
					color: #666;

					.imgBox {
						position: relative;

						image {
							width: 50rpx;
							height: 50rpx;
							margin-bottom: 22rpx;
						}
					}

				}
			}
		}

		.fuwu {
			margin: 68rpx auto 0;
			width: 690rpx;
			// height: 274rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 32rpx 10rpx 34rpx 30rpx;

			.dingdan_top {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.my_diangdan {
					font-size: 30rpx;
					color: #333333;
					line-height: 40rpx;
					font-weight: 600;
				}

				.dingdan_top_right {
					color: #666;
					font-size: 24rpx;
					line-height: 34rpx;
					display: flex;
					align-items: center;

					text {
						margin-right: 20rpx;
					}

					.icon {
						color: #666;
					}
				}

			}

			.dingdan_Box {
				display: flex;
				// justify-content: space-between;
				flex-wrap: wrap;
				margin: 22rpx 28rpx 0;

				.dingdan_item {
					padding: 30rpx 0;
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 24rpx;
					color: #666;

					.imgBox {
						position: relative;

						image {
							width: 80rpx;
							height: 80rpx;
							margin-bottom: 22rpx;
						}
					}

				}
			}
		}
	}

	.top_box_title {
		color: #fff;
		font-size: 36rpx;
		font-weight: 600;
		text-align: center;
		padding: 20rpx 0 18rpx;
	}

	.top_adress {
		display: flex;
		margin-left: 44rpx;
		margin-top: 36rpx;
		align-items: center;

		image {
			width: 110rpx;
			height: 110rpx;
			border-radius: 50%;
			border: 2px solid #fff;
		}

		.top_right {
			color: #fff;
			display: flex;
			flex-direction: column;
			padding: 8rpx 0 4rpx 0;
			margin-left: 30rpx;
			font-size: 30rpx;

			.name {
				margin-bottom: 20rpx;
			}

			.phone {
				font-size: 28rpx;
			}
		}
	}
</style>